﻿
@{
    ViewBag.Title = "仓库用户管理";
    Layout = "~/Views/Shared/_LayoutPage.cshtml";
}
@model IOA.MES.DataAccess.VModel.VWarehouse

@section Contents{
    <style>
        .roles {
            display: table;
        }
        .roleitem {
            float: left;
            background-color: #FAFAFA;
            border: 1px solid #F6F6F6;
            padding: 5px 10px;
            margin: 0 10px 10px 0;
        }

            .roleitem .layui-icon-delete {
                color: red;
                margin-left: 5px;
            }
    </style>
}

<div id="page"></div>

<template id="tplPage">
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-form layui-card-header layuiadmin-card-header-auto">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">当前仓库：</label>
                        <div class="layui-input-inline">
                            <input type="text" id="txtKey" class="layui-input" value="@($"{Model.WarehouseCode}-{Model.WarehouseName}")" disabled />
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">用户名：</label>
                        <div class="layui-input-inline">
                            <input type="text" id="txtUserName" class="layui-input" value="" placeholder="请输入用户名" />
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button class="layui-btn layui-btn-normal layuiadmin-btn-list" type="button" onclick="addUser();">
                            <i class="layui-icon layui-icon-addition layuiadmin-button-btn"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-card">
            <div class="layui-card-body">
                <div class="layui-input-inline roles">
                    <div class="roleitem" v-for="item in users">{{item.TrueName}}<i class="layui-icon layui-icon-delete" @@click="removeUser(item)"></i></div>
                </div>
            </div>
        </div>
    </div>
</template>

@section Scripts{
    <script>
        var vm = new Vue({
            el: "#page",
            template: "#tplPage",
            data: {
                lang: JSON.parse(lang),
                warehouse: @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model)),
                users: []
            }
        });

        setTimeout(function () {
            initLayui();
        }, 50);

        function initLayui() {
            layui.use(['table', 'layer', 'laydate', 'form'], function () {
                var layer = layui.layer,
                    table = layui.table,
                    laydate = layui.laydate,
                    form = layui.form;

                queryUsers();
                function queryUsers() {
                    var loadId = layer.load();
                    $.ajax({
                        url: "/Warehouse/QueryWarehouseUsers",
                        data: {
                            warehouseCode: vm.$data.warehouse.WarehouseCode
                        },
                        complete: function () {
                            layer.close(loadId);
                        },
                        success: function (res) {
                            if (res.ErrCode != 200) {
                                layer.msg(res.ErrMsg, { icon: 5 });
                                return;
                            }
                            vm.$data.users = res.Data;
                        }
                    });
                }
            });
        }

        function addUser() {
            var userName = $("#txtUserName").val().trim();
            if (userName == '') {
                return;
            }
            var loadId = layer.load();
            $.ajax({
                url: "/Warehouse/AddWarehouseUser",
                data: {
                    warehouseCode: vm.$data.warehouse.WarehouseCode,
                    userName: userName
                },
                complete: function () {
                    layer.close(loadId);
                },
                success: function (res) {
                    if (res.ErrCode != 200) {
                        layer.msg(res.ErrMsg, { icon: 5 });
                        return;
                    }
                    layer.msg("添加成功！", { icon: 6, time: 1500 });
                    vm.$data.users.push(res.Data);
                }
            });
        }

        function removeUser(user) {
            var loadId = layer.load();
            $.ajax({
                url: "/Warehouse/RemoveWarehouseUser",
                data: {
                    warehouseCode: vm.$data.warehouse.WarehouseCode,
                    userName: user.UserName
                },
                complete: function () {
                    layer.close(loadId);
                },
                success: function (res) {
                    if (res.ErrCode != 200) {
                        layer.msg(res.ErrMsg, { icon: 5 });
                        return;
                    }
                    layer.msg("移除成功！", { icon: 6, time: 1500 });
                    vm.$data.users.splice(vm.$data.users.indexOf(user), 1);
                }
            });
        }
    </script>
}
